<?php include "./pc/view/header.inc.htm"; ?>

<div class="container">
    <form action="my-profile.htm" method="post" id="my_profile_form">
    <div class="content">
        <div class="content-header">
            <div class="tw-header-inner">
                <h2>个人资料</h2>
            </div>
        </div>
        <div class="content-body">
            <div class="reply-form">
                <div class="reply-inner">
                    <div class="topic-content clearfix">
                        <div class="topic-user left" style="width: 300px;">
                            <img src="<?php echo $user['avatar_url']; ?>" class="avatar" id="avatar_img" alt="<?php echo $user['username']; ?>" title="<?php echo $user['username']; ?>">
                            <strong><?php echo $user['username']; ?></strong>
                            <small>我就是我，不一样的烟火~</small>
                        </div>
                        <div class="right">
                            <input type="file" id="avatar_upload" accept=".jpg,.jpeg,.png,.gif,.bmp" class="upload" style="width:70px; opacity:0.7" value="更换头像"/>
                            <div style="width:100%; height:6px; border:1px border #64ACA0; margin:2px 0;" id="avatar_progress">
                                <div style="width: 0px;  height: 6px; background: #64ACA0;">
                                </div>
                            </div>
                            <button class="Button Button--primary" type="submit" loading-text="正在提交...">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-inner">
                <dl class="user-profile">
                    <dt>用户名</dt>
                    <dd><input class="form-control" type="text" name="username" value="<?php echo $user['username']; ?>"></dd>
                    <dt>邮箱</dt>
                    <dd style="margin-top: 5px;"><input class="form-control" type="text" name="email" value="<?php echo $user['email']; ?>"></dd>
                    <dt>用户组</dt>
                    <dd><?php echo $user['groupname']; ?></dd>
                    <dt>注册时间</dt>
                    <dd><?php echo $user['create_date_fmt']; ?></dd>
                    <dt>注册IP</dt>
                    <dd><?php echo $user['create_ip_fmt']; ?></dd>
                    <dt>最后登录</dt>
                    <dd><?php echo $user['login_date_fmt']; ?></dd>
                    <dt>主题</dt>
                    <dd><?php echo $user['threads']; ?></dd>
                    <dt>帖子</dt>
                    <dd><?php echo $user['posts']; ?></dd>
                    <dt>喜欢</dt>
                    <dd><?php echo $user['myagrees']; ?></dd>
                    <dt>被喜欢</dt>
                    <dd><?php echo $user['agrees']; ?></dd>
                </dl>
            </div>
        </div>
    </div>
    </form>
    <div class="dashboard">

        <?php include "./pc/view/my_header.inc.htm"; ?>

        <?php include "./pc/view/copyright.htm"; ?>

    </div>
    <div class="clear"></div>
</div>

<?php include "./pc/view/my_footer.inc.htm"; ?>

<script src="xiunoui/async.js"></script>
<script src="xiunoui/upload.js"></script>

<script>
$('#avatar_upload').one('click', function() {
    var fileinput = this;
    var jfile = $(fileinput);
    var jimg = $('#avatar_img');
    var url = 'my-uploadavatar.htm';
    var up = new FileUploader(fileinput, url);
    up.filetype = 'image/png';
    up.thumb_width = 64;
    up.onprogress = function(file, percent) {
        $('#avatar_progress').show().son('div').width(percent+'%');
    }
    up.ononce = function(file, e) {
        var json = json_decode(e.target.response);
        if(json && json.code == 0) {
            $('#avatar_img').attr('src', json.message+'?'+Math.random());
        } else {
            var err = json && json.message ? json.message : e.target.response;
            alert(err);
        }
        setTimeout(function() {$('#avatar_progress').son('div').width(0)}, 2000);
    }
    up.oncomplete = function(code, files) {
        if(code == 0) {
            //$.alert('ok');
        } else {
            //alert(code);
        }
    }
    up.onselected = function(files) {
        var file = files[0];
        jimg.srcLocalFile(file);
        if(!/^image/.test(file.type) || !/(.jpg|.jpeg|.gif|.png|.bmp)$/i.test(file.type)) {
            jfile.popover('只允许上传jpg、jpeg、gif、png格式的图片'); return;
        }
        up.start();
    }
    
    up.onerror = function(file, e) {
        var json = json_decode(e.target.response);
        var err = json && json.message ? json.message : e.target.response;
        jfile.popover(err); return;
    }
    up.onabort = function(file, e) {}
    up.init();
});

var jform = $('#my_profile_form');
var jusername = jform.find('input[name="username"]');
var jemail = jform.find('input[name="email"]');
var jsubmit = jform.find('button[type="submit"]');
jform.off('submit').on('submit', function() {
    if(!jusername.val()) {
        jusername.popover('用户名不能为空').focus();
        return false;
    } else if(!jemail.val()) {
        jemail.popover('Email 不能为空').focus();
        return false;
    }
    var postdata = jform.serialize();
    jsubmit.button('loading');
    $.xpost(jform.attr('action'), postdata, function(code, message) {
        if(code == 0) {
            jsubmit.text(message);
            setTimeout(function() {jsubmit.button('reset');}, 2000);
            return;
        } else if(code == 1) {
            jusername.popover(message).focus();
        } else if(code == 2) {
            jemail.popover(message).focus();
        } else {
            $.alert(message);
        }
        jsubmit.button('reset');
    });
    return false;
});


$('#my_profile_menu').find('a').eq(0).class_active();

</script>